<!--  -->
<template>
  <div class="arrange">
    <h2>归档文件目录</h2>
    <el-table v-loading="loading" :data="list" border style="width: 100%">
      <el-table-column
        label="序号"
        prop="fileNumber"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        label="姓名"
        prop="name"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        label="身份证号"
        prop="idCard"
        align="center"
      ></el-table-column>
      <el-table-column
        label="类别"
        prop="reimbursementType"
        align="center"
      ></el-table-column>
      <el-table-column
        label="文件题名"
        prop="fileTitle"
        align="center"
        width="280"
      ></el-table-column>
      <el-table-column
        label="办理日期"
        prop="collectionTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="总费用"
        prop="totalCost"
        align="center"
      ></el-table-column>
      <el-table-column
        label="统筹支付"
        prop="coordinatedPayment"
        align="center"
      ></el-table-column>
    </el-table>
    <div class="doc-footer">
      <el-button type="info" @goback="goback">返 回</el-button>
      <el-button type="primary" @click="printDirectory">打印目录</el-button>
      <el-button type="success" @click="printStrip">打印脊背条</el-button>
      <el-button type="danger" @click="sureComplete">确定整理完成</el-button>
    </div>
    <div class="strip-box" style="width: 200px" v-if="spinalStrip">
      <div style="text-align: center; padding: 4px 0">
        <p
          style="
            width: 30px;
            border: 1px #000 solid;
            display: inline-block;
            padding: 0px 3px;
          "
        >
          {{ spinalStrip.hospitalName }}
        </p>
      </div>
      <div>
        <p>全宗号</p>
        <p style="height: 30px"></p>
      </div>
      <div>
        <p>年度</p>
        <p>{{ spinalStrip.years }}</p>
      </div>
      <div>
        <p>保管期限</p>
        <p>{{ spinalStrip.term }}</p>
      </div>
      <div>
        <p>类别</p>
        <p>{{ spinalStrip.mainType }}</p>
        <p>({{ spinalStrip.childType }})</p>
      </div>
      <div>
        <p>盒号</p>
        <p>({{ spinalStrip.storageLocation }})</p>
      </div>
      <div>
        <p>卷号</p>
        <p>({{ spinalStrip.fileNumberRange }})</p>
      </div>
    </div>
  </div>
</template>

<script>
import { documentation, confirmOrga } from "@/api/files/basics";
export default {
  props: ["ids"],
  components: {},
  data() {
    return {
      list: [],
      spinalStrip: null,
      loading: false,
    };
  },
  computed: {},
  watch: {
    ids: {
      handler() {
        this.getDocumentation();
      },
      immediate: true,
    },
  },
  //方法集合
  methods: {
    getDocumentation() {
      let params = {
        ids: this.ids,
      };
      documentation(params).then((res) => {
        if (res.code == 200) {
          this.list = res.data.list;
          this.spinalStrip = res.data.spinalStrip;
          console.log(this.spinalStrip);
        }
      });
    },
    goback() {
      this.$emit("goback");
    },
    printDirectory() {},
    printStrip() {},
    sureComplete() {
      let data = this.list;
      confirmOrga(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("整理完成");
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getDocumentation();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.doc-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.arrange {
  padding: 20px;
  h2 {
    font-size: 20px;
    padding: 0;
    margin: 0;
    text-align: center;
    letter-spacing: 10px;
  }
}
.strip-box {
  border: 1px solid #000;
  > div {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
    > p {
      font-size: 20px;
      color: 0;
      padding: 4px 0;
      margin: 0;
      &:nth-child(1) {
        letter-spacing: 16px;
      }
    }
  }
}
</style>